<template>
  <div class="layouts-admin">
    <div class="aic jcb cP">
      <LltHeader :isCollapse="isCollapse" />
    </div>

    <div class="llt-layouts-body-admin fd">
      <div>
        <el-menu
          :collapse-transition="true"
          :default-active="state.defaultActive"
          style="width: 200px; margin-right: 15px; flex-shrink: 0"
          :background-color="themeCurrentMenuItem.ColorBg"
          @select="handleSelect"
        >
          <!-- <el-menu-item index="1">
            <template #title> 个人信息</template>
          </el-menu-item> -->
          <el-menu-item index="2">
            <template #title> {{t('密码设置')}}</template>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 个人信息 -->
      <el-scrollbar class="maxHeight  flex1">
        <!-- 个人中心 start -->
        <!-- <div v-if="state.defaultActive == 1">
          <div class="p20">
            <el-form
              ref="ruleFormRefuser"
              :rules="rules"
              :model="state.userInfo"
              label-width="120px"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="state.userInfo.username"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="state.userInfo.email"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="state.userInfo.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitUser(ruleFormRefuser)"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div> -->
        <!-- 个人中心 end -->
        <!-- 密码设置 start -->
          <div class="p20">
            <el-form
              ref="ruleFormRef"
              :rules="rules"
              :model="state.loginValidateForm"
              label-width="180px"
            >
             
               <el-form-item label="旧密码" prop="oldPassword">
      <el-input v-model="state.loginValidateForm.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input v-model="state.loginValidateForm.newPassword" placeholder="请输入新密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input v-model="state.loginValidateForm.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
    </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmitPassword(ruleFormRef)"
                  >{{t('保存')}}</el-button
                >
              </el-form-item>
            </el-form>
        </div>
        <!-- 密码设置 end -->
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  toRef,
  toRefs,
  onBeforeMount,
  watch,
  onUpdated,
  computed,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import LltMenu from "/@/layouts/components/menu.vue";
import LltHeader from "/@/layouts/components/header2.vue";
import { useIndexStore } from "/@ts/store";
import getmd5 from '/@ts/plugins/md5';
// import { resetPassword,resetUserinfo } from "/@ts/axios/urlApi/system";
import { ElForm, ElMessage } from "element-plus";
import { getLocalStorage } from "../hooks/storage";
import { useI18n } from "vue-i18n";
import { updateUserPwd } from "../axios/urlApi/system/user";
const { t } = useI18n();
const store = useIndexStore();
const themeCurrentMenuItem = computed(() => store.getThemeCurrentMenuItem);
const router = useRouter();
const route = useRoute();
onMounted(() => {
});
onMounted(() => {
  // getUserInfo();
});
const ruleFormRef = ref<InstanceType<typeof ElForm>>();
const getUserInfo = () => {
  let data: string = getLocalStorage(
    import.meta.env.VITE_USER_INFO_KEY as string,
  ) as string;
  state.userInfo = data
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (state.loginValidateForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请验证密码"));
  } else if (value !== state.loginValidateForm.password) {
    callback(new Error("两次密码不一致!"));
  } else {
    callback();
  }
};
const state:any = reactive({
  userInfo: {},
  defaultActive: "1",
  loginValidateForm: {
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",

  },
});
    const equalToPassword = (rule, value, callback) => {
      if (state.loginValidateForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
const rules = reactive({
        oldPassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" }
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
        }
);

const handleSelect = (e: string) => {
  state.defaultActive = e;
  switch (e) {
    case "1":
      //个人中心

      break;

    case "2":
      //设置密码
      break;
  }
};

const onSubmitPassword = (formEl: InstanceType<typeof ElForm> | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
 
           updateUserPwd({
          oldPassword: getmd5(state.loginValidateForm.oldPassword) 
          ,newPassword:getmd5(state.loginValidateForm.newPassword) 
           }).then(response => {
              ElMessage.success("操作成功")
          });
    } else {
      
      return false;
    }
  });
};
const ruleFormRefuser = ref<InstanceType<typeof ElForm>>();
const onSubmitUser = (formEl: InstanceType<typeof ElForm> | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
     
    } else {
     
      return false;
    }
  });
};
</script>

<style scoped lang="scss">
.layouts-admin {
  // width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  background-color: var(--commonBoxmp);
}

.llt-layouts-body-admin {
  height: 100px;
  min-height: calc(100% - 0px);
  max-height: calc(100% - 0px);
  padding: 15px 100px;
}
// 路由切换动画
// .list-enter-active,
// .list-leave-active {
//   transition: all 0.5s ease;
// }
// .list-enter-from,
// .list-leave-to {
//   opacity: 0;
//   transform: translateY(30px);
// }
</style>
